<!doctype html>
<html lang="zh-Hans">

<head>
  <meta charset="utf-8">
  <meta name="author" content="Fresns" />
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
  <meta name="format-detection" content="telephone=no,address=no,email=no">
  <meta name="mobileOptimized" content="width">
  <meta name="HandheldFriendly" content="true">
  <meta name="applicable-device" content="mobile">
  <meta name="apple-touch-fullscreen" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Fresns">
  <link rel="stylesheet" href="assets/css/bootstrap.min.css">
  <link rel="stylesheet" href="assets/css/fontawesome.min.css">
  <link rel="stylesheet" href="assets/css/client-mobile.css">
  <title>Fresns 手机版</title>
</head>

<body>

  <nav class="toptab shadow-sm sticky-top clearfix">
    <div class="toptab-btn float-left"><a class="btn_icon"href="#"><i class="fas fa-search"></i></a></div>
    <div class="toptab-nav float-left text-center">小组</div>
    <div class="toptab-btn float-right"></div>
  </nav>

  <div class="">
    <div class="row">
      <div class="col-3">
        <div class="list-group" id="list-tab" role="tablist">
          <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">推荐小组</a>
          <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">xx版区</a>
          <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">xx分类</a>
          <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">xx圈子</a>
        </div>
      </div>
      <div class="col-9">
        <div class="tab-content" id="nav-tabContent">
          <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
            <ul class="list-group list-group-flush">
              <li class="list-group-item">An item</li>
              <li class="list-group-item">A second item</li>
              <li class="list-group-item">A third item</li>
              <li class="list-group-item">A fourth item</li>
              <li class="list-group-item">And a fifth one</li>
            </ul>
          </div>
          <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">
            <div class="list-group">
              <a href="#" class="list-group-item list-group-item-action">
                <div class="d-flex w-100 justify-content-between">
                  <h5 class="mb-1">List group item heading</h5>
                  <small>3 days ago</small>
                </div>
                <p class="mb-1">Some placeholder content in a paragraph.</p>
                <small>And some small print.</small>
              </a>
              <a href="#" class="list-group-item list-group-item-action">
                <div class="d-flex w-100 justify-content-between">
                  <h5 class="mb-1">List group item heading</h5>
                  <small class="text-muted">3 days ago</small>
                </div>
                <p class="mb-1">Some placeholder content in a paragraph.</p>
                <small class="text-muted">And some muted small print.</small>
              </a>
              <a href="#" class="list-group-item list-group-item-action">
                <div class="d-flex w-100 justify-content-between">
                  <h5 class="mb-1">List group item heading</h5>
                  <small class="text-muted">3 days ago</small>
                </div>
                <p class="mb-1">Some placeholder content in a paragraph.</p>
                <small class="text-muted">And some muted small print.</small>
              </a>
            </div>
          </div>
          <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
          <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
        </div>
      </div>
    </div>
  </div>

  <!-- Footer -->
  <div class="footer text-center text-secondary mt-2 pb-5">
    <p class="mb-1">苏ICP备15021382号-1</p>
    <p class="mb-4">Powered by Fresns</p>
  </div>

  <!-- TabBar -->
  <nav class="row fixed-bottom tabbar">
    <a class="col text-center text-secondary" href="index.html">
      <img class="tabbar-icon" src="assets/images/tabbar_icon.png">
      <div class="tabbar-text">首页</div>
    </a>
    <a class="col text-center text-success" href="groups.html">
      <img class="tabbar-icon" src="assets/images/tabbar_icon.png">
      <div class="tabbar-text">小组</div>
    </a>
    <a class="col text-center text-secondary" href="portal.html">
      <img class="tabbar-icon" src="assets/images/tabbar_icon.png">
      <div class="tabbar-text">门户</div>
    </a>
    <a class="col text-center text-secondary" href="extends.html">
      <img class="tabbar-icon" src="assets/images/tabbar_icon.png">
      <div class="tabbar-text">扩展</div>
    </a>
    <a class="col text-center text-secondary" href="me.html">
      <img class="tabbar-icon" src="assets/images/tabbar_icon.png">
      <div class="tabbar-text">我</div>
    </a>
  </nav>


  <!-- JavaScript -->
  <script src="assets/js/jquery-3.5.1.slim.min.js"></script>
  <script src="assets/js/bootstrap.bundle.min.js"></script>
  <script src="assets/js/client-mobile.js"></script>
</body>

</html>